import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {LightButton} from "../component/LightButton";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import MathUtil from "../../../script/frame/codeAdapter/MathUtil";


interface IProp {

}
interface IState {
    w: number,
    title: string,

    des?: string,
    back?: ResourceKey,
    okButton?: ResourceKey,
    cancelButton?: ResourceKey,
    buttonSize?: { w: number, h: number },
    okFun?: () => UISyncData
    cancelFun?: () => UISyncData,
}

export default class DialogPage extends React.Element<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);
        this.setState({
            w: 0,
            title: '',
            des: '',
            visible: false,
        })
    }

    render = () => {
        const yMargin = 0.01660;
        const backSize = { h: 0,  w: this.state.w }
        let backPos = { x: 0.5 - backSize.w / 2, y: 0.4 };

        const xPadding = 0.01250;
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);
        let retStr = '';
        const name = this.state.title;
        if (name) {
            retStr = retStr + `${name}\n\n`;
        }
        if (this.state.des) {
            const descriptLineStr = this.state.des;
            retStr = retStr + `${descriptLineStr}\n`;
        } else {
            const descriptLineStr = '描述为空';
            retStr = retStr + `${descriptLineStr}\n`;
        }
        const retLineArr = CodeUtil.autoLineBreak(retStr, backSize.w, fontSize)
        const retLineNum = retLineArr.length - 1;
        const retSize = { h: retLineNum * fontSize, w: backSize.w }
        backSize.h = backSize.h + retSize.h + yMargin * 2;

        let backImage = Configer.getResource(ResourceKey.infoPagePath);
        if (this.state.back) {
            backImage = Configer.getResource(this.state.back)
        }

        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        let okButton;
        if (this.state.okButton) {
            okButton = Configer.getResource(this.state.okButton);
        } else {
            okButton = Configer.getResource(ResourceKey.resumeBarEnter)
        }

        let canelButton;
        if (this.state.cancelButton) {
            canelButton = Configer.getResource(this.state.cancelButton);
        } else {
            canelButton = Configer.getResource(ResourceKey.resumeBarCanel)
        }

        let buttonSize = { w: 0.01, h: 0.02 };
        if (this.state.buttonSize) {
            buttonSize = this.state.buttonSize;
        }

        const buttonSpace = (backSize.w - buttonSize.w * 2) / 3;
        const buttonMargin = 0.02
        backSize.h = backSize.h + buttonSize.h + buttonMargin;

        // const firstButtonSpace = (backSize.w - buttonSize.w * 2 - buttonSpace) / 2;

        return <View key={GuiKeys.dialogPageBack} style={{ hidden: !this.state.visible, width: 1, height: 1, backgroundImage: disableBlp, left: 0, top: 0 }}>
            <View   key={GuiKeys.dialogPage} style={{  backgroundImage: backImage, left: backPos.x, top: backPos.y, width: backSize.w, height: backSize.h }}>
                <View   key={GuiKeys.dialogPageText} style={{ paddingL: xPadding, paddingR: xPadding, marginT: yMargin, width: retSize.w, height: retSize.h }}>{retStr}</View>
                <View   key={GuiKeys.dialogPageButtonCon} style={{ height: buttonSize.h, width: backSize.w, marginT: buttonMargin }}>
                    <LightButton onMouseDown={this.click}   key={GuiKeys.dialogPageOkButton} style={{ backgroundImage: okButton, height: buttonSize.h, width: buttonSize.w, marginL: buttonSpace }}></LightButton>
                    <LightButton onMouseDown={this.clickCanel}   key={GuiKeys.dialogPageCanelButton} style={{ backgroundImage: canelButton, height: buttonSize.h, width: buttonSize.w, marginL: buttonSpace }}></LightButton>
                </View>
            </View>
        </View>
    }


    click = () => {
        let ret;
        if (this.state.okFun) {
            ret = this.state.okFun();
        }
        this.setState({
            ...this.state,
            visible: false,
        })
        return ret;
    }

    clickCanel = () => {
        let ret;
        if (this.state.cancelFun) {
            ret = this.state.cancelFun();
        }
        this.setState({
            ...this.state,
            visible: false,
        })
        return ret;
    }
}